import styles from './index.module.scss'
import { useState} from 'react'
import { loginIn } from '@/api/login'
import { injectScript } from '@/utils/utils'
import { encryptAES } from '@/utils/cryptojs'
export { encryptParams } from '@/utils/rsa'
import { registers } from '@/constant'

const cncryptionCipher = data => {
  const encryptedString = encryptAES(data, registers)
  return encryptedString
}

// 获取易盾token
const getYiDunToken = async () => {
  await injectScript('/js/yidun-web.js', 'yidun')
  const neg = createNEGuardian({ appId: 'YD00766955874482', timeout: 10000 })
  const result = await neg.getToken()
  return result?.token || ''
}

const Index = props => {
  const [email, setEmail] = useState('')
  const [pwd, setPwd] = useState('')
  const [showEmailError, setEmailError] = useState(false)
  const [showPwdError, setPwdError] = useState(false)
  const [loginSuccess, setLoginSuccess] = useState(false)
  const [loginError, setLoginError] = useState(false)
  const checkEmail = email => {
    const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
    return pattern.test(email)
  }

  const login = async () => {
    if (!checkEmail(email)) {
      setEmailError(true)
      return
    }
    setEmailError(false)
    if (!pwd) {
      setPwdError(true)
      return
    }
    setPwdError(false)
    const ydtoken = await getYiDunToken()
    const MuId =  localStorage.getItem('MuId')
    const res = await loginIn({ medium: email, password: cncryptionCipher(pwd), ydtoken },{headers:{MuId:MuId ? MuId: undefined}})
    if (res.code) {
      setLoginError(res.msg)
    } else {
      localStorage.setItem('token', res.data.token)
      localStorage.setItem('email', email)
      setLoginSuccess(true)
    }
  }
  const toHome = () => {
    window.location.href = '/'
  }
  return (
    <div className={styles.loginBox}>
      {!loginSuccess ? (
        <div className={styles.enterEmail}>
          <input
            placeholder="请输入您的邮箱"
            name="email"
            className={styles.input}
            onInput={e => setEmail(e.currentTarget.value)}
          />
          {showEmailError ? <p className={styles.errorInfo}>请输入正确格式的邮箱</p> : null}
          <input
            placeholder="请输入您的密码"
            name="password"
            className={styles.input}
            onInput={e => setPwd(e.currentTarget.value)}
          />
          {showPwdError ? <p className={styles.errorInfo}>请输入密码</p> : null}
          <div className={styles.btn} onClick={login}>
            登录
          </div>
          {loginError ? <p className={styles.errorInfo}>{loginError}</p> : null}
        </div>
      ) : (
        <div className={styles.loginSuccess}>
          <div className={styles.title}>
            <img src="/images/import_success.png" alt="登录成功" />
            <span>登录成功</span>
          </div>
          <div className={styles.btn} onClick={toHome}>
            去官网
          </div>
        </div>
      )}
    </div>
  )
}

export default Index

export async function getServerSideProps() {
  let props = {
    layoutProps: {
      noSomeMetaInfo: false,
      url: '/',
      title: '星视界 - 海外华人免费中文电视直播和影视大全',
      desc: '星视界是一款海外华人电视直播和影视大全，免费观看中文电视节目和影视内容。在这里，您可以畅享中文直播内容及海量影视资源，涵盖香港、台湾、新马、大陆频道直播，以及电视剧、电影、综艺、动漫节目点播等，尽情享受视听盛宴。'
    }
  }
  return {
    props
  }
}
